.x-tabbar {
	display: flex;
	box-sizing: content-box;
	width: 100%;
	height: $tabbar-height;
	background-color: $tabbar-background-color;

	&--fixed {
		position: fixed;
		bottom: 0;
		left: 0;
	}

	&--safe-area-inset-bottom {
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	&-item {
		display: flex;
		flex: 1;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: $tabbar-item-text-color;
		font-size: $tabbar-item-font-size;
		line-height: $tabbar-item-line-height;
		cursor: pointer;

		&__icon {
			position: relative;
			margin-bottom: $tabbar-item-margin-bottom;
			font-size: $tabbar-item-icon-size;

			.x-icon {
				display: block;
				min-width: 1em;
			}

			img {
				display: block;
				height: $tabbar-item-icon-size;
			}
		}

		&--active {
			color: $tabbar-item-active-color;
		}

		.x-info {
			margin-top: 2px;
		}
	}
}
